<template>
  <div class="app-container">
    <div class="top_filter">
      <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="110px">
<!--        <el-form-item label="员工名称" prop="peopleName">-->
<!--          <el-input-->
<!--            v-model="queryParams.peopleName"-->
<!--            placeholder="请输入员工名称"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="员工编号" prop="peopleCode">-->
<!--          <el-input-->
<!--            v-model="queryParams.peopleCode"-->
<!--            placeholder="请输入员工编号"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="员工证件号" prop="peopleCardNum">-->
<!--          <el-input-->
<!--            v-model="queryParams.peopleCardNum"-->
<!--            placeholder="请输入员工证件号"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="客户企业" prop="companyName">-->
<!--          <el-input-->
<!--            v-model="queryParams.companyName"-->
<!--            placeholder="请输入客户企业"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="签约主体" prop="signMainName">-->
<!--          <el-input-->
<!--            v-model="queryParams.signMainName"-->
<!--            placeholder="请输入签约主体"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="社保账户" prop="socialSecurityNum">-->
<!--          <el-input-->
<!--            v-model="queryParams.socialSecurityNum"-->
<!--            placeholder="请输入社保账户"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
        <el-form-item label="社保申报月份" prop="ssReportMonth">
          <el-date-picker
            v-model="queryParams.ssReportMonth"
            clearable
            type="month"
            value-format="yyyy-MM"
            placeholder="请选择社保申报月份"
          />
        </el-form-item>
<!--        <el-form-item label="公积金账户" prop="fundNum">-->
<!--          <el-input-->
<!--            v-model="queryParams.fundNum"-->
<!--            placeholder="请输入公积金账户"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
        <el-form-item label="公积金申报月份" prop="afReportMonth">
          <el-date-picker
            v-model="queryParams.afReportMonth"
            clearable
            type="month"
            value-format="yyyy-MM"
            placeholder="请选择公积金申报月份"
          />
        </el-form-item>
        <el-form-item label="办理类型" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择办理类型" clearable filterable>
            <el-option
              v-for="item in handleItemOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="状态" prop="status">-->
        <!--          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable filterable>-->
        <!--            <el-option-->
        <!--              v-for="item in reportManageStatusOptions"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('queryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--    <el-row :gutter="10" class="mb8">-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--          type="primary"-->
    <!--          plain-->
    <!--          icon="el-icon-plus"-->
    <!--          size="mini"-->
    <!--          @click="handleAdd"-->
    <!--        >新增-->
    <!--        </el-button>-->
    <!--      </el-col>-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--          type="info"-->
    <!--          plain-->
    <!--          icon="el-icon-edit"-->
    <!--          size="mini"-->
    <!--          :disabled="single"-->
    <!--          @click="handleUpdate"-->
    <!--        >修改-->
    <!--        </el-button>-->
    <!--      </el-col>-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--          type="danger"-->
    <!--          plain-->
    <!--          icon="el-icon-delete"-->
    <!--          size="mini"-->
    <!--          :disabled="multiple"-->
    <!--          @click="handleDelete"-->
    <!--        >删除-->
    <!--        </el-button>-->
    <!--      </el-col>-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--          type="warning"-->
    <!--          plain-->
    <!--          icon="el-icon-upload2"-->
    <!--          size="mini"-->
    <!--          @click="handleImport"-->
    <!--        >导入-->
    <!--        </el-button>-->
    <!--      </el-col>-->
    <!--      &lt;!&ndash;          <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />&ndash;&gt;-->
    <!--    </el-row>-->

    <el-table v-loading="loading" :data="statementList" stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" align="center" width="50" fixed="left" />
      <el-table-column label="员工名称" align="center" prop="people.name" fixed="left" />
      <el-table-column label="员工编号" align="center" prop="people.code" width="100" fixed="left" />
      <el-table-column label="证件号码" align="center" prop="people.cardNum" width="100" fixed="left" />
      <el-table-column label="客户企业" align="center" prop="company.nameSecond" width="100" />
      <el-table-column label="签约主体" align="center" prop="signMain.name" width="100" />
      <el-table-column label="户籍类型" align="center" prop="people.domicileType">
        <template slot-scope="scope">
          <span v-if="scope.row.people.domicileType === '1'">本地城镇户籍</span>
          <span v-if="scope.row.people.domicileType === '2'">外地城镇户籍</span>
          <span v-if="scope.row.people.domicileType === '3'">本地农村户籍</span>
          <span v-if="scope.row.people.domicileType === '4'">外地农村户籍</span>
        </template>
      </el-table-column>
      <el-table-column label="电话号码" align="center" prop="people.mobilePhone" />
      <el-table-column label="开户行" align="center" prop="people.bank" />
      <el-table-column label="银行账号" align="center" prop="people.bankNum" />
      <el-table-column label="民族" align="center" prop="people.nation" />
      <el-table-column label="学历" align="center" prop="people.education">
        <template slot-scope="scope">
          <span v-if="scope.row.people.education === '1'">小学</span>
          <span v-if="scope.row.people.education === '2'">初中</span>
          <span v-if="scope.row.people.education === '3'">中专</span>
          <span v-if="scope.row.people.education === '4'">普通中学</span>
          <span v-if="scope.row.people.education === '5'">高中</span>
          <span v-if="scope.row.people.education === '6'">职高</span>
          <span v-if="scope.row.people.education === '7'">大专</span>
          <span v-if="scope.row.people.education === '8'">专科</span>
          <span v-if="scope.row.people.education === '9'">本科</span>
          <span v-if="scope.row.people.education === '10'">硕士</span>
          <span v-if="scope.row.people.education === '11'">博士</span>
          <span v-if="scope.row.people.education === '12'">其他</span>
        </template>
      </el-table-column>
      <el-table-column label="婚育状况" align="center" prop="people.marital">
        <template slot-scope="scope">
          <span v-if="scope.row.people.marital === '1'">未婚未育</span>
          <span v-if="scope.row.people.marital === '2'">已婚未育</span>
          <span v-if="scope.row.people.marital === '3'">已婚已育</span>
          <span v-if="scope.row.people.marital === '4'">普通中学</span>
          <span v-if="scope.row.people.marital === '5'">离异未育</span>
        </template>
      </el-table-column>

      <!--      <el-table-column label="日期" align="center" prop="reportDate" width="120">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ parseTime(scope.row.reportDate, '{y}-{m}-{d}') }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column
        label="社保办理险种"
        align="center"
        prop="handleInsuranceType"
        width="120"
        :formatter="handleInsuranceTypeFormat"
      />
      <el-table-column label="社保账户" align="center" prop="people.socialSecurityNum" />
      <el-table-column label="社保缴费比例" align="center" prop="signMain.yangLaoPayProportionEtp" width="210">
        <template slot-scope="scope">
          <span>养老：企业{{ scope.row.signMain.yangLaoPayProportionEtp }}%，个人{{ scope.row.signMain.yangLaoPayProportionPsn }}%；
            医疗：企业{{ scope.row.signMain.yiLiaoPayProportionEtp }}%，个人{{ scope.row.signMain.yiLiaoPayProportionPsn }}%；
            失业：企业{{ scope.row.signMain.shiYePayProportionEtp }}%，个人{{ scope.row.signMain.shiYePayProportionPsn }}%；
            工伤：{{ scope.row.signMain.gongShangPayProportionEtp }}%；生育：{{ scope.row.signMain.shengYuPayProportionEtp }}%；
          </span>
        </template>
      </el-table-column>
      <el-table-column label="社保基数" align="center" prop="ssBase" />
      <el-table-column label="社保补缴月数" align="center" prop="ssSupplementMonthNum" width="120" />
      <el-table-column label="社保补缴基数" align="center" prop="ssSupplementBase" width="120" />
      <el-table-column label="社保申报月份" align="center" prop="ssReportMonth" width="120">
        <template slot-scope="scope">
          <span>{{ parseTimeNew(scope.row.ssReportMonth, '{y}-{m}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="社保生效月份" align="center" prop="ssEffectMonth" width="120">
        <template slot-scope="scope">
          <span>{{ parseTimeNew(scope.row.ssEffectMonth, '{y}-{m}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公积金账户" align="center" prop="people.fundNum" width="100" />
      <el-table-column label="公积金缴费比例" align="center" prop="signMain.afPayProportionEtp" width="150">
        <template slot-scope="scope">
          <span>企业{{ scope.row.signMain.afPayProportionEtp }}%，个人{{ scope.row.signMain.afPayProportionPsn }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="公积金基数" align="center" prop="afBase" width="100" />
      <el-table-column label="公积金补缴月数" align="center" prop="afSupplementMonthNum" width="120" />
      <el-table-column label="公积金补缴基数" align="center" prop="afSupplementBase" width="120" />
      <el-table-column label="公积金申报月份" align="center" prop="afReportMonth" width="120">
        <template slot-scope="scope">
          <span>{{ parseTimeNew(scope.row.afReportMonth, '{y}-{m}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公积金生效月份" align="center" prop="afEffectMonth" width="120">
        <template slot-scope="scope">
          <span>{{ parseTimeNew(scope.row.afEffectMonth, '{y}-{m}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="缴纳所在省" align="center" prop="payProvinceName" width="100" />
      <el-table-column label="缴纳所在市" align="center" prop="payCityName" width="100" />
      <el-table-column label="减员原因" align="center" prop="reason" />
      <el-table-column label="类型" align="center" prop="type">
        <template slot-scope="scope">
          <span v-if="scope.row.type === '1'" style="color: #20a0ff">增员</span>
          <span v-if="scope.row.type === '2'" style="color: red">减员</span>
          <span v-if="scope.row.type === '3'" style="color: goldenrod">续保</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status === '0'">待审核</span>
          <span v-if="scope.row.status === '1'">待申报</span>
          <span v-if="scope.row.status === '2'">申报中</span>
          <span v-if="scope.row.status === '3'">在保</span>
          <span v-if="scope.row.status === '4'">停保</span>
          <span v-if="scope.row.status === '5'">申报失败</span>
          <span v-if="scope.row.status === '6'">取消申报</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="150">
        <template slot-scope="scope">
          <span>{{ parseTimeNew(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button-->
      <!--            v-if="scope.row.status === '0'"-->
      <!--            size="mini"-->
      <!--            type="text"-->
      <!--            icon="el-icon-edit"-->
      <!--            @click="handleUpdate(scope.row)"-->
      <!--          >修改-->
      <!--          </el-button>-->
      <!--          <el-button-->
      <!--            v-if="scope.row.status === '0'"-->
      <!--            size="mini"-->
      <!--            type="text"-->
      <!--            icon="el-icon-delete"-->
      <!--            @click="handleDelete(scope.row)"-->
      <!--          >删除-->
      <!--          </el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page="queryParams.pageNum"
        :page-sizes="pageSizes"
        :page-size="queryParams.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加或修改员工社保公积金申报对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">

        <el-form-item label="身份证号" prop="peopleCardNum">
          <el-input v-model="form.peopleCardNum" placeholder="请输入身份证号" style="width: 400px" @change="queryPeopleByCode" />
        </el-form-item>
        <el-form-item label="员工编号" prop="peopleCode">
          <el-input v-model="form.peopleCode" placeholder="" :disabled="true" style="width: 400px" />
        </el-form-item>
        <el-form-item label="员工姓名" prop="peopleName">
          <el-input v-model="form.peopleName" placeholder="" :disabled="true" style="width: 400px" />
        </el-form-item>
        <el-form-item label="所属客户企业" prop="companyNameSecond">
          <el-input v-model="form.companyNameSecond" placeholder="" :disabled="true" style="width: 400px" />
        </el-form-item>
        <el-form-item label="社保缴费比例" prop="ssPayProportion">
          <el-input v-model="form.ssPayProportion" placeholder="" :disabled="true" style="width: 400px" />
        </el-form-item>
        <el-form-item label="公积金缴费比例" prop="afPayProportion">
          <el-input v-model="form.afPayProportion" placeholder="" :disabled="true" style="width: 400px" />
        </el-form-item>
        <!--        <el-form-item label="日期" prop="reportDate">-->
        <!--          <el-date-picker-->
        <!--            v-model="form.reportDate"-->
        <!--            clearable-->
        <!--            style="width: 400px"-->
        <!--            type="date"-->
        <!--            value-format="yyyy-MM-dd"-->
        <!--            placeholder="请选择日期"-->
        <!--          />-->
        <!--        </el-form-item>-->
        <el-form-item label="社公办理类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择社公办理类型" style="width: 400px" @change="handleReduceReason">
            <el-option
              v-for="dict in handleItemOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="社保账户" prop="ssAccount">
          <el-input v-model="form.ssAccount" placeholder="请输入社保账户" style="width: 400px" />
        </el-form-item>
        <!--        <el-form-item label="社保档位" prop="ssLevel">-->
        <!--          <el-input v-model="form.ssLevel" placeholder="请输入社保档位" />-->
        <!--        </el-form-item>-->
        <el-form-item label="社保基数" prop="ssBase">
          <el-input
            v-model="form.ssBase"
            placeholder="请输入社保基数"
            onkeyup="this.value= this.value.match(/\d/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item label="社保补缴月数" prop="ssSupplementMonthNum">
          <el-input v-model="form.ssSupplementMonthNum" placeholder="请输入社保补缴月数" style="width: 400px" @input="validateSsMonthNum" />
        </el-form-item>
        <el-form-item label="社保补缴基数" prop="ssSupplementBase">
          <el-input
            v-model="form.ssSupplementBase"
            placeholder="请输入社保补缴基数"
            onkeyup="this.value= this.value.match(/\d/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item label="社保申报月份" prop="ssReportMonth">
          <el-date-picker
            v-model="form.ssReportMonth"
            clearable
            style="width: 400px"
            type="month"
            value-format="yyyy-MM"
            placeholder="请选择社保申报月份"
          />
        </el-form-item>
        <el-form-item label="社保生效月份" prop="ssEffectMonth">
          <el-date-picker
            v-model="form.ssEffectMonth"
            clearable
            style="width: 400px"
            type="month"
            value-format="yyyy-MM"
            placeholder="请选择社保生效月份"
          />
        </el-form-item>
        <el-form-item label="公积金账户" prop="afAccount">
          <el-input v-model="form.afAccount" placeholder="请输入公积金账户" style="width: 400px" />
        </el-form-item>
        <!--        <el-form-item label="公积金档位" prop="afLevel">-->
        <!--          <el-input v-model="form.afLevel" placeholder="请输入公积金档位" />-->
        <!--        </el-form-item>-->
        <el-form-item label="公积金基数" prop="afBase">
          <el-input
            v-model="form.afBase"
            placeholder="请输入公积金基数"
            onkeyup="this.value= this.value.match(/\d/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item label="公积金补缴月数" prop="afSupplementMonthNum">
          <el-input
            v-model="form.afSupplementMonthNum"
            placeholder="请输入公积金补缴月数"
            style="width: 400px"
            @input="validateAfMonthNum"
          />
        </el-form-item>
        <el-form-item label="公积金补缴基数" prop="afSupplementBase">
          <el-input
            v-model="form.afSupplementBase"
            placeholder="请输入公积金补缴基数"
            onkeyup="this.value= this.value.match(/\d/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item label="公积金申报月份" prop="afReportMonth">
          <el-date-picker
            v-model="form.afReportMonth"
            clearable
            style="width: 400px"
            type="month"
            value-format="yyyy-MM"
            placeholder="请选择公积金申报月份"
          />
        </el-form-item>
        <el-form-item label="公积金生效月份" prop="afEffectMonth">
          <el-date-picker
            v-model="form.afEffectMonth"
            clearable
            style="width: 400px"
            type="month"
            value-format="yyyy-MM"
            placeholder="请选择公积金生效月份"
          />
        </el-form-item>
        <el-form-item label="缴纳所在省" prop="payProvinceCode">
          <el-select v-model="form.payProvinceCode" placeholder="请选择省级地区" @change="getCity">
            <el-option
              v-for="dict in provinceOptions"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="缴纳所在市" prop="payCityCode">
          <el-select v-model="form.payCityCode" placeholder="请选择市级地区">
            <el-option
              v-for="dict in cityOptions"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="reduceReason" label="减员原因" prop="reason">
          <el-input v-model="form.reason" type="textarea" placeholder="请输入内容" style="width: 400px" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--上传对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip text-center">
          <!--          <div class="el-upload__tip" slot="tip">-->
          <!--            <el-checkbox v-model="upload.updateSupport"/>-->
          <!--            是否更新已经存在的本次申报的员工数据-->
          <!--          </div>-->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size:12px;vertical-align: baseline;"
            @click="importTemplate"
          >下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listPeopleSsafReport,
  getPeopleSsafReport,
  addPeopleSsafReport,
  updatePeopleSsafReport,
  delPeopleSsafReport
} from '@/api/people_ssaf_report'
import { queryByCode } from '@/api/people'
import { getChildrenById } from '@/api/area'
import { getToken } from '@/utils/auth'
import { parseTime } from '@/utils'

export default {
  name: 'StopProtect',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 结算单表格数据
      statementList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 禁用flag
      disable: false,
      // 查询参数
      queryParams: {
        orderByColumn: 'm.id',
        isAsc: 'desc',
        pageNum: 1,
        pageSize: 10,
        peopleId: null,
        type: null,
        status: null,
        reportDate: null,
        handleInsuranceType: null,
        ssAccount: null,
        ssLevel: null,
        ssBase: null,
        ssSupplementMonthNum: null,
        ssSupplementBase: null,
        ssReportMonth: null,
        ssEffectMonth: null,
        afAccount: null,
        afLevel: null,
        afBase: null,
        afSupplementMonthNum: null,
        afSupplementBase: null,
        afReportMonth: null,
        afEffectMonth: null,
        reason: null,
        peopleCardNum: null,
        peopleName: null,
        peopleCode: null,
        companyName: null,
        signMainName: null,
        statusList: [],
        socialSecurityNum: null,
        fundNum: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        peopleCardNum: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ],
        payProvinceCode: [
          { required: true, message: '请选择缴纳所在省', trigger: 'change' }
        ],
        payCityCode: [
          { required: true, message: '请选择缴纳所在市', trigger: 'change' }
        ]
      },
      provinceOptions: [],
      cityOptions: [],
      upload: {
        // 是否显示弹出层（投保方案导入）
        open: false,
        // 弹出层标题（投保方案导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的投保方案数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: '' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/api/peopleSsafReport/importData'
      },
      // 每页条数
      pageSizes: [10, 20, 50],
      reportManageStatusOptions: [
        { label: '待审核', value: '0' },
        { label: '待申报', value: '1' },
        { label: '申报中', value: '2' },
        { label: '在保', value: '3' },
        { label: '停保', value: '4' },
        { label: '申报失败', value: '5' },
        { label: '取消申报', value: '6' }
      ],
      handleItemOptions: [
        { label: '增员', value: '1' },
        { label: '减员', value: '2' },
        { label: '续保', value: '3' }
      ],
      reduceReason: false

    }
  },
  created() {
    var peopleId = this.$route.query.peopleId
    if (peopleId) {
      this.queryParams.peopleId = peopleId
    }
    // this.getProvince()
    this.getList()
  },
  methods: {
    /** 查询结算单列表 */
    getList() {
      this.loading = true
      // this.queryParams.type = '2'
      // this.queryParams.status = '4'
      if (this.queryParams.ssReportMonth && this.queryParams.ssReportMonth.length === 7) {
        this.queryParams.ssReportMonth = this.queryParams.ssReportMonth + '-01'
      }
      if (this.queryParams.afReportMonth && this.queryParams.afReportMonth.length === 7) {
        this.queryParams.afReportMonth = this.queryParams.afReportMonth + '-01'
      }
      listPeopleSsafReport(this.queryParams).then(response => {
        this.statementList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 取消按钮*/
    cancel() {
      this.open = false
      this.reset()
    },
    /** 表单重置*/
    reset() {
      this.form = {
        id: null,
        peopleId: null,
        type: null,
        status: null,
        reportDate: null,
        handleInsuranceType: null,
        ssAccount: null,
        ssLevel: null,
        ssBase: null,
        ssSupplementMonthNum: null,
        ssSupplementBase: null,
        ssReportMonth: null,
        ssEffectMonth: null,
        afAccount: null,
        afLevel: null,
        afBase: null,
        afSupplementMonthNum: null,
        afSupplementBase: null,
        afReportMonth: null,
        afEffectMonth: null,
        reason: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        peopleCode: null,
        peopleName: null,
        companyNameSecond: null,
        ssPayProportion: null,
        afPayProportion: null,
        payCityCode: null,
        payProvinceCode: null,
        peopleCardNum: null
      }
      this.reduceReason = false
      if (this.$refs['form']) {
        this.$refs['form'].resetFields()
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery(formName) {
      this.$refs[formName].resetFields()
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加员工社保公积金申报'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getPeopleSsafReport(id).then(response => {
        this.form = response.data
        this.form.peopleCardNum = response.data.people.cardNum
        this.queryPeopleByCode(this.form.peopleCardNum)
        this.getCity(this.form.payProvinceCode)
        if (this.form.handleInsuranceType) {
          this.form.handleInsuranceType = this.form.handleInsuranceType.split(',')
        }
        this.open = true
        this.title = '修改员工社保公积金申报'
      })
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.peopleId == null) {
            this.$message.error('请正确输入员工编号')
            return false
          }
          if (this.form.ssReportMonth) {
            this.form.ssReportMonth = this.form.ssReportMonth + '-01'
          }
          if (this.form.ssEffectMonth) {
            this.form.ssEffectMonth = this.form.ssEffectMonth + '-01'
          }
          if (this.form.afReportMonth) {
            this.form.afReportMonth = this.form.afReportMonth + '-01'
          }
          if (this.form.afEffectMonth) {
            this.form.afEffectMonth = this.form.afEffectMonth + '-01'
          }
          if (this.form.handleInsuranceType) {
            this.form.handleInsuranceType = this.form.handleInsuranceType.sort()
            this.form.handleInsuranceType = this.form.handleInsuranceType.toString()
          }
          if (this.form.id != null) {
            updatePeopleSsafReport(this.form).then(response => {
              this.$message.success('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addPeopleSsafReport(this.form).then(response => {
              this.$message.success('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$confirm.apply('是否确认删除员工社保公积金申报编号为"' + ids + '"的数据项？').then(function() {
        return delPeopleSsafReport(ids)
      }).then(() => {
        this.getList()
        this.$message.success('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('api/peopleSsafReport/export', {
        ...this.queryParams
      }, `report_${new Date().getTime()}.xlsx`)
    },
    queryPeopleByCode(code) {
      queryByCode(code).then(res => {
        if (res.code === 200) {
          this.form.peopleId = res.data.id
          this.form.peopleName = res.data.name
          this.form.peopleCode = res.data.code
          this.form.companyNameSecond = res.data.company.nameSecond
          this.form.socialSecurityNum = res.data.socialSecurityNum
          this.form.fundNum = res.data.fundNum
          this.form.ssPayProportion = '养老：企业' + res.data.signMain.yangLaoPayProportionEtp +
            '%个人' + res.data.signMain.yangLaoPayProportionPsn + '%；' +
            '医疗：企业' + res.data.signMain.yiLiaoPayProportionEtp +
            '%个人' + res.data.signMain.yiLiaoPayProportionPsn + '%；' +
            '失业：企业' + res.data.signMain.shiYePayProportionEtp +
            '%个人' + res.data.signMain.shiYePayProportionPsn + '%；' +
            '工伤' + res.data.signMain.gongShangPayProportionEtp +
            '%；生育' + res.data.signMain.shengYuPayProportionEtp + '%'

          if (res.data.signMain.afPayProportionEtp) {
            this.form.afPayProportion = '企业' + res.data.signMain.afPayProportionEtp + '%，个人' + res.data.signMain.afPayProportionPsn + '%'
          }
        }
      }).catch(() => {
        this.form.peopleId = null
        this.form.peopleName = null
        this.form.peopleCode = null
        this.form.companyNameSecond = null
        this.form.ssPayProportion = null
        this.form.afPayProportion = null
        this.form.socialSecurityNum = null
        this.form.fundNum = null
      })
    },
    /** 社保办理险种格式化*/
    handleInsuranceTypeFormat(row) {
      var str = ''
      if (row.handleInsuranceType) {
        var type = row.handleInsuranceType.split(',')
        if (type.length > 0) {
          for (var item of type) {
            switch (item) {
              case '1':
                str += '养老,'
                break
              case '2':
                str += '医疗,'
                break
              case '3':
                str += '失业,'
                break
              case '4':
                str += '工伤,'
                break
              case '5':
                str += '生育,'
                break
              default:
                break
            }
          }
        }
        return str.substring(0, str.length - 1)
      }
      return str
    },
    /** 限制正整数*/
    validateAfMonthNum(value) {
      this.form.afSupplementMonthNum = /^[0-9]*$/.test(parseInt(value)) ? String(parseInt(value)).replace('.', '') : ''
    },
    validateSsMonthNum(value) {
      this.form.ssSupplementMonthNum = /^[0-9]*$/.test(parseInt(value)) ? String(parseInt(value)).replace('.', '') : ''
    },
    /**
     * 获取省
     */
    getProvince() {
      getChildrenById(0).then(res => {
        if (res.code === 200) {
          this.provinceOptions = res.data
        }
      })
    },
    /** 获取对应的市*/
    getCity(value) {
      getChildrenById(value).then(res => {
        if (res.code === 200) {
          this.cityOptions = res.data
        }
      })
    },
    /** 导入*/
    handleImport() {
      this.upload.title = '员工社保申报导入'
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('peopleSsafReport/peopleSsafReport/importTemplate', {}, `peopleSsafReport_template_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.upload.updateSupport = 0
      this.$refs.upload.clearFiles()
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 100vh;padding: 10px 10px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    /** 处理减员原因 */
    handleReduceReason(value) {
      if (value) {
        if (value === '2') {
          this.reduceReason = true
        } else {
          this.reduceReason = false
        }
      }
    },
    /** 时间转换 */
    parseTimeNew(val, format) {
      return parseTime(val, format)
    }

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  line-height: 1;

  .top_filter {
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
